<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          background-color="#b0bed9"
          text-color="#000"
          active-text-color="#fcfcfc"
          :default-active="editableTabsValue"
        >
          <el-sub-menu
            :index="item.model_fk.toString()"
            v-for="item in store.state.admin.funList"
            :key="item.model_fk"
          >
            <template #title>
              <el-icon>
                <school v-if="item.model_fk == 2" />
                <briefcase v-else-if="item.model_fk == 3" />
              </el-icon>
              <span>{{ item.model_name }}</span>
            </template>
            <template v-for="item2 in item.funs">
              <el-menu-item
                :index="item2.page_url"
                :key="item2.t_fun_pk"
                v-if="item2.type == 2"
                @click="handleItemClick(item2)"
                >{{ item2.fun_name }}</el-menu-item
              >
            </template>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-tabs
            v-model="editableTabsValue"
            closable
            type="card"
            @tab-remove="removeTab"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.t_fun_pk"
              :label="item.fun_name"
              :name="item.page_url"
            >
            </el-tab-pane>
          </el-tabs>
          <aside class="header-right">
            <span>
              您好：{{ store.state.admin.admin_name }}
            </span>
            <el-button type="danger" size="small" @click="handleLogout"
              >退出</el-button
            >
            <el-button type="warning" size="small" @click="handleClear"
              >清空缓存</el-button
            >
          </aside>
        </el-header>
        <el-main>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script lang="ts" setup>
import { ref, reactive, watch,onActivated } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { clearAll} from "@/util/localcache";
import ajax from "@/util/request";
import { IFun } from "@/util/my-types";
import { ElMessageBox } from "element-plus";
import { School, Briefcase } from "@element-plus/icons-vue";
// import { ElMessageBox } from "element-plus";
const store = useStore();


const editableTabsValue = ref("");
const editableTabs = reactive<any[]>([]);

const router = useRouter();

// 退出登录
function handleLogout() {
  ElMessageBox.confirm("请确认是否退出，并返回到登陆页面。", "退出提示", {
    type: "info",
    cancelButtonText: "取消",
    confirmButtonText: "退出"
  }).then(
    () => {
      editableTabs.length = 0;
      // 访问登出接口
      ajax("/login/logout");
      // 重设vuex的登录信息admin

      store.commit("setAdmin", {});

      

      // 跳转到首页
      router.push("/");
    }
  );
}
// 点击菜单项目
function handleItemClick(item: IFun) {
  editableTabsValue.value = item.page_url;
  // 如果不存在则添加
  if (!editableTabs.some((v) => v.page_url == item.page_url)) {
    editableTabs.push(item);
  }
}

// 移除标签页
function removeTab(name: string) {
  const index = editableTabs.findIndex((v) => v.page_url == name);
  if (index == -1) {
    return;
  }
  // 不在第一位
  if (index != 0) {
    editableTabsValue.value = editableTabs[index - 1].page_url;
    // 是在第一位
  } else {
    // 目前还有至少两个选项卡时，显示后面的数据
    if (editableTabs.length >= 2) {
      editableTabsValue.value = editableTabs[1].page_url;
    }
  }
  // 删除掉
  editableTabs.splice(index, 1);
  // 如果全部被删除完毕，那么跳转到欢迎页面
  if (editableTabs.length == 0) {
    editableTabsValue.value = "";
  }
}

function handleClear() {
  clearAll();
}

watch(editableTabsValue, (newVal) => {
  router.push("/adm-index/" + newVal);
});

onActivated(() => {
  // 重置选项卡的值
  if (editableTabsValue.value != "") {
    editableTabsValue.value = "";
  }
})

// alert("123");
// alert({message: "消息",type:"success"})

</script>

<style scoped>
.header-right {
  position: absolute;
  right: 20px;
  top: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
}

.header-right > span {
  padding-right: 10px;
}

.el-menu {
  height: 100vh;
}
</style>